<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img {
				width: 300px;
				height: 300px;
			}

			.fade-enter-active,
			.fade-leave-active {
				transition: 1s all ease;
			}

			.fade-enter-active {
				opacity: 1;
				width: 300px;
				height: 300px;
			}

			.fade-leave-active {
				opacity: 0;
				width: 100px;
				height: 100px;
			}

			.fade-enter {
				opacity: 0;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>

		<div id="databinding">
			<button v-on:click="show = !show">单击缩小消失放大显示</button><br />
			<transition name="fade">
				<img src="../img/22.jpg" v-show="show" />
			</transition>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: '#databinding',
				data: {
					show: true,
				},
			});
		</script>

	</body>
</html>
